<!-- Records.vue -->
<template>
    <div class="records">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list v-model:loading="loading" :finished="finished" :error="error" error-text="请求失败，点击重试"
                @load="onLoad">
                <!-- 记录列表 -->
                <div v-if="records.length > 0" class="record-list">
                    <van-cell-group v-for="record in records" :key="record.id" class="record-item"
                        @click="goToDetail(record.recordId)">
                        <van-cell>
                            <!-- 头部信息 -->
                            <template #title>
                                <div class="record-header">
                                    <span class="point-name">{{ record.checkPlace || '未知地点' }}</span>
                                    <van-tag :type="getStatusType(record.eventType)">
                                        {{ getStatusText(record.eventType) }}
                                    </van-tag>
                                </div>
                            </template>

                            <!-- 标签信息 -->
                            <template #label>
                                <div class="record-info">
                                    <div class="info-row check-result">
                                        <span>报修内容：{{ record.checkContent || '无' }}
                                        </span>
                                        <!-- <van-button v-if="record.eventType == 0" @click.stop="goToUpdate(record)"
                                            type="primary" size="mini">点击接单</van-button> -->
                                    </div>
                                    <div class="info-row">
                                        <span>报修人: {{ record.checkUserName || '位置人员' }}</span>
                                        <span>时间: {{ formatTime(record.recordTime) }}</span>
                                    </div>
                                </div>
                            </template>
                        </van-cell>
                    </van-cell-group>
                </div>

                <!-- 空状态 -->
                <van-empty v-else-if="!loading" description="暂无记录" />
            </van-list>
        </van-pull-refresh>

        <van-dialog @confirm="changeType" v-model:show="show" title="接单提示" show-cancel-button>
            <div style="text-align: center;">是否确认接单？</div>
        </van-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue'
import { useRouter } from 'vue-router'
import { Tag as VanTag, Button as VanButton, Empty as VanEmpty } from "vant"
import { myOrder, updateData } from "@/api/common"

const router = useRouter()
const pageSize = 10

// 状态定义
const tabs = [
    { label: '全部', value: 'ALL' },
    { label: '未接单', value: '0' },
    { label: '已接单', value: '1' },
    { label: '处理中', value: '2' },
    { label: '等待中', value: '3' },
    { label: '已办结', value: '4' }
]

// 列表相关状态
const toast = inject("toast")
const activeTab = ref('ALL')
const records = ref([])
const loading = ref(true)
const finished = ref(false)
const refreshing = ref(false)
const error = ref(false)
const currentPage = ref(1)
const show = ref(false)
const record = ref({})
const userInfo = ref(JSON.parse(localStorage.getItem("SAVE_USER_INFO")))

function getList() {
    let obj = {
        pageSize: pageSize,
        page: currentPage.value,
        userId: userInfo.value.userId
    }
    myOrder(obj).then(res => {
        let newRecords = res.records || []
        if (refreshing.value) {
            records.value = res.records
        } else {
            records.value = [...records.value, ...newRecords]
        }
        loading.value = false
        error.value = false
        finished.value = newRecords.length < pageSize
        currentPage.value++
    })
}

// 列表加载更多
const onLoad = () => {
    if (!finished.value) {
        loading.value = true
        getList()
    }
}

// 下拉刷新
const onRefresh = () => {
    finished.value = false
    error.value = false
    currentPage.value = 0
    getList()
}

// 跳转详情页
const goToDetail = async (id) => {
    try {
        await router.push(`/repairDetail?id=${id}&type=notes`)
    } catch (error) {
    }
}

function changeType() {
    record.value.eventType = 1
    record.value.userId = userInfo.value.userId
    record.value.userName = userInfo.value.realName
    updateData(record.value).then(res => {
        if (res.code == 200) {
            toast.msg(res.message)
        }
        show.value = false
    }, err => {
        toast.msg(err)
    })
}

// 初始化加载
onMounted(() => {})

// 工具函数
const formatTime = (time) => {
    if (!time) return ''
    const date = new Date(time)
    return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
    })
}

const getStatusType = (status) => {
    const types = {
        '0': 'danger',
        '2': 'warning',
        '3': 'warning',
        '4': 'success',
        '1': 'primary',
    }
    return types[status] || 'default'
}

const getStatusText = (status) => {
    const texts = {
        '0': '未接单',
        '1': '已接单',
        '2': '处理中',
        '3': '等待中',
        '4': '已办结'
    }
    return texts[status] || '未知状态'
}

const getCheckResultType = (result) => {
    return result === 'NORMAL' ? 'success' : 'danger'
}

const getCheckResultText = (result) => {
    return result === 'NORMAL' ? '正常' : '异常'
}
</script>

<style scoped>
.records {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.record-list {
    padding: 12px;
}

.record-item {
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.point-name {
    font-size: 16px;
    font-weight: 500;
    color: #323233;
    flex: 1;
    max-height: 100px;
    overflow: hidden;
}

.record-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #646566;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-row span {
    overflow: hidden;
    max-height: 50px;
}

.check-result {
    margin-bottom: 4px;
}

:deep(.van-cell) {
    padding: 16px;
    line-height: 1.5;
}

:deep(.van-cell) {
    padding: 16px;
    line-height: 1.5;
}

:deep(.van-tag) {
    margin-left: 8px;
}
.clickBtn :deep(.van-button__content) {
    width: 40px;
}
</style>